<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, maxmum-scale=1.0, minmum-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="fonts/iconfont.css">
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入swiper的css和js 用于轮播图 -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.min.js"></script>
    <!-- 引入jquery -->
    <script src="js/jquery.min.js"></script>
    <script src="js/index.js"></script>
    <title>京东移动端</title>
</head>

<body>
    <!-- 1、顶部广告区域-start -->
    <header>
        <ul>
            <li class="close-btn">
                <img src="./images/close.png" alt="">
            </li>
            <li>
                <img src="./images/logo.png" alt="">
            </li>
            <li>打开京东App，购物更轻松</li>
            <li>立即打开</li>
        </ul>
    </header>
    <!-- 1、顶部广告区域-end -->

    <!-- 2、搜索内容区域-start -->
    <!-- 
        使用flex布局，两边贴边，中间自适应，
        .header-search {display: flex}
        .msCancelBtn {width:10%}
        .header-search-form{flex:1}
        .msShortcutLogin {width:10%}
     -->
    <div class="header-search">
        <div class="msCancelBtn">
            <div></div>
        </div>
        <div class="header-search-form">
            <div class="jd-header-icon"></div>
            <!-- 这里插入字体图标 -->
            <i class="search-input-left-icon iconfont icon-search"></i>
            <input type="search" placeholder="洗烘一体 洗衣机">
        </div>
        <div class="msShortcutLogin">
            <span>登录</span>
        </div>
    </div>
    <!-- js -->
    <script>
        // 页面开始滚动，广告隐藏，header-search模块置顶
        $(document).scroll(function () {
            if (window.pageYOffset >= 10) {
                $('header').stop().css('display', 'none')
                $('.header-search').stop().animate({
                    top: 0
                }).fadeIn()
            } else {
                $('header').stop().css('display', 'block')
                $('.header-search').stop().animate({
                    top: '1.5rem'
                }, 200).fadeIn()
            }
        })
    </script>
    <!-- 2、搜索内容区域-end -->

    <div class="main-content">
        <!-- 3、轮播图区域-start -->
        <div class="silder">
            <!-- Swiper-轮播图，不能更改结构和类名 -->
            <div class="swiper-container">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide">
                        <img src="upload/banner1.jpg.dpg" alt="">
                    </li>
                    <li class="swiper-slide">
                        <img src="upload/banner2.jpg.dpg" alt="">
                    </li>
                    <li class="swiper-slide">
                        <img src="upload/banner3.jpg.dpg" alt="">
                    </li>
                    <li class="swiper-slide">
                        <img src="upload/banner4.jpg.dpg" alt="">
                    </li>
                </ul>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
            <!-- <ul>
                <li>
                    <img data-lazy-src="upload/banner1.jpg.dpg" alt="">
                </li>
            </ul> -->
        </div>
        <!-- 3、轮播图区域-end -->

        <!-- 4、品牌日区域-start -->
        <div class="brand">
            <div>
                <a href="javascript:;">

                    <img src="upload/pp1.jpg.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="javascript:;">
                    <img src="upload/pp2.jpg.dpg" alt="">
                </a>

            </div>
            <div>
                <a href="javascript:;">
                    <img src="upload/pp3.jpg.dpg" alt="">
                </a>

            </div>
        </div>
        <!-- 4、品牌日区域-end -->
        <!-- 5、小图标列表区域-start -->
        <div class="box_list">
            <a href="javascript:;">
                <div class="tp">
                    <img data-lazy-src="upload/xtb1.png.webp" alt="">
                </div>
                <span>京东超市</span>
            </a>
            <a href="javascript:;">
                <div class="tp">
                    <img data-lazy-src="upload/xtb2.png.webp" alt="">
                </div>
                <span>数码电器</span>
            </a>
            <a href="javascript:;">
                <div class="tp">
                    <img data-lazy-src="upload/xtb3.webp" alt="">
                </div>
                <span>京东服饰</span>
            </a>
            <a href="javascript:;">
                <div class="tp">
                    <img data-lazy-src="upload/xtb4.webp" alt="">
                </div>
                <span>京东生鲜</span>
            </a>
            <a href="javascript:;">
                <div class="tp">
                    <img data-lazy-src="upload/xtb5.webp" alt="">
                </div>
                <span>京东到家</span>
            </a>
            <a href="javascript:;">
                <div class="tp">
                    <img data-lazy-src="upload/xtb6.webp" alt="">
                </div>
                <span>充值缴费</span>
            </a>
            <a href="javascript:;">
                <div class="tp">
                    <img data-lazy-src="upload/xtb7.webp" alt="">
                </div>
                <span>9.9元拼</span>
            </a>
            <a href="javascript:;">
                <div class="tp">
                    <img data-lazy-src="upload/xtb8.webp" alt="">
                </div>
                <span>领券</span>
            </a>
            <a href="javascript:;">
                <div class="tp">
                    <img data-lazy-src="upload/xtb9.webp" alt="">
                </div>
                <span>领金贴</span>
            </a>
            <a href="javascript:;">
                <div class="tp">
                    <img data-lazy-src="upload/xtb10.webp" alt="">
                </div>
                <span>PLUS会员</span>
            </a>

        </div>
        <!-- 5、小图标列表区域-end -->

        <!-- 6、限时秒杀区域-start -->
        <div class="seckill">
            <div class="title_wrap">
                <a href="javascript:;" class="seckill-left-link">
                    <div class="seckill-title">京东秒杀</div>
                    <div class="seckill-timer-wrap">
                        <span>8点场</span>
                        <i>01:22:59</i>
                    </div>
                </a>
                <a href="javascript:;" class="seckill-right-link">
                    <span>更多秒杀</span>
                    <i class="iconfont icon-roundright "></i>
                </a>
            </div>
            <div class="seckill-slider">
                <ul>
                    <li>
                        <div class="seckill-item-img">
                            <img data-lazy-src="upload/ms1.dpg" alt="">
                        </div>
                        <div class="seckill-item-price">
                            <div>￥18.8</div>
                            <del>￥ 56.9</del>
                        </div>
                    </li>
                    <li>
                        <div class="seckill-item-img">
                            <img data-lazy-src="upload/ms2.dpg" alt="">
                        </div>
                        <div class="seckill-item-price">
                            <div>￥18.8</div>
                            <del>￥ 56.9</del>
                        </div>
                    </li>
                    <li>
                        <div class="seckill-item-img">
                            <img data-lazy-src="upload/ms3.dpg" alt="">
                        </div>
                        <div class="seckill-item-price">
                            <div>￥18.8</div>
                            <del>￥ 56.9</del>
                        </div>
                    </li>
                    <li>
                        <div class="seckill-item-img">
                            <img data-lazy-src="upload/ms4.dpg" alt="">
                        </div>
                        <div class="seckill-item-price">
                            <div>￥18.8</div>
                            <del>￥ 56.9</del>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 6、限时秒杀区域-end -->

        <!-- 7、卡券区域-start -->
        <div class="floor-the-container">
            <div class="kq-img-top">
                <a href="javascript:;">
                    <span>
                        <img data-lazy-src="upload/kq1.dpg" alt="">
                    </span>
                </a>
                <a href="javascript:;">
                    <span>
                        <img data-lazy-src="upload/kq2.dpg" alt="">
                    </span>
                </a>
            </div>
            <div class="kq-img-bottom">
                <a href="javascript:;">
                    <img data-lazy-src="upload/kq3.webp" alt="">
                </a>
            </div>


        </div>
        <!-- 7、卡券区域-end -->

        <!-- 8、东家小院区域-start -->
        <div class="expo_loaded">
            <div class="djxy-title">
                <img data-lazy-src="upload/djxy1.dpg" alt="">
            </div>
            <div class="djxy-contain">
                <div class="djxy-middle">
                    <span>
                        <p>烹饪美食</p>
                        <i>变身居家巧妇</i>
                        <div>
                            <a href="javascript: ;">
                                <img data-lazy-src="upload/djxy2.dpg" alt="">
                            </a>
                            <a href="javascript:;">
                                <img data-lazy-src="upload/djxy3.dpg" alt="">
                            </a>
                        </div>
                    </span>
                    <span>
                        <p>育婴奶粉</p>
                        <i>不一样的奶粉</i>
                        <div>
                            <a href="javascript: ;">
                                <img data-lazy-src="upload/djxy4.dpg" alt="">
                            </a>
                            <a href="javascript:;">
                                <img data-lazy-src="upload/djxy5.dpg" alt="">
                            </a>
                        </div>
                    </span>
                </div>
                <div class="djxy-footer">
                    <ul>
                        <li>
                            <p class="xy-title">潮流一线</p>
                            <i>潮男必备</i>
                            <a href="javascript: ;">
                                <img data-lazy-src="upload/djxy6.dpg" alt="">
                            </a>
                        </li>
                        <li>
                            <p class="xy-title">浪漫倾心</p>
                            <i>情人节必备</i>
                            <a href="javascript: ;">
                                <img data-lazy-src="upload/djxy7.dpg" alt="">
                            </a>
                        </li>
                        <li>
                            <p class="xy-title">简约时尚</p>
                            <i>彰显气质</i>
                            <a href="javascript: ;">
                                <img data-lazy-src="upload/djxy8.dpg" alt="">
                            </a>
                        </li>
                        <li>
                            <p class="xy-title">时尚男鞋</p>
                            <i>舒适男鞋</i>
                            <a href="javascript: ;">
                                <img data-lazy-src="upload/djxy9.dpg" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 8、东家小院区域-end -->

        <!-- 9、每日购区域-start -->
        <div class="every_buy">
            <div class="djxy-title">
                <img data-lazy-src="upload/mrg.dpg" alt="">
            </div>
            <ul>
                <li>
                    <p>免息星球</p>
                    <i>白条免息购</i>
                    <a href="javascript: ;">
                        <img data-lazy-src="upload/mrg1.dpg" alt="">
                    </a>
                </li>
                <li>
                    <p>每日特价</p>
                    <i>9块9疯抢</i>
                    <a href="javascript: ;">
                        <img data-lazy-src="upload/mrg2.dpg" alt="">
                    </a>
                </li>
                <li>
                    <p>品牌闪购</p>
                    <i>汇大牌好价</i>
                    <a href="javascript: ;">
                        <img data-lazy-src="upload/mrg3.dpg" alt="">
                    </a>
                </li>
                <li>
                    <p>免息星球</p>
                    <i>白条免息购</i>
                    <a href="javascript: ;">
                        <img data-lazy-src="upload/mrg4.dpg" alt="">
                    </a>
                </li>
                <li>
                    <p>排行榜</p>
                    <i>热销推荐</i>
                    <a href="javascript: ;">
                        <img data-lazy-src="upload/mrg5.dpg" alt="">
                    </a>
                </li>
                <li>
                    <p>拍拍好物</p>
                    <i>二手优品</i>
                    <a href="javascript: ;">
                        <img data-lazy-src="upload/mrg6.dpg" alt="">
                    </a>
                </li>
                <li>
                    <p>新品首发</p>
                    <i>京东小魔方</i>
                    <a href="javascript: ;">
                        <img data-lazy-src="upload/mrg7.dpg" alt="">
                    </a>
                </li>
                <li>
                    <p>发现好货</p>
                    <i>发现品质生活</i>
                    <a href="javascript: ;">
                        <img data-lazy-src="upload/mrg8.dpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <!-- 9、每日购区域-end -->

        <!-- 10、为你推荐区域-start -->
        <div class="send_to">
            <span>
                <img data-lazy-src="upload/tj1.png" alt="">
            </span>
            <ul>
                <li>
                    <span>
                        <img data-lazy-src="upload/tj2.webp" alt="">
                    </span>
                    <span class="desc_goods">PRUAD男士真皮双肩包男 大容量多功能商务电脑背包旅行包休闲书包韩版潮 黑色 </span>
                    <span>
                        <i>￥129.9</i>
                        <div>看相似</div>
                    </span>
                </li>
                <li>
                    <span>
                        <img data-lazy-src="upload/tj3.webp" alt="">
                    </span>
                    <span class="desc_goods">PRUAD男士真皮双肩包男 大容量多功能商务电脑背包旅行包休闲书包韩版潮 黑色 </span>
                    <span>
                        <i>￥129.9</i>
                        <div>看相似</div>
                    </span>
                </li>
                <li>
                    <span>
                        <img data-lazy-src="upload/tj4.webp" alt="">
                    </span>
                    <span class="desc_goods">PRUAD男士真皮双肩包男 大容量多功能商务电脑背包旅行包休闲书包韩版潮 黑色 </span>
                    <span>
                        <i>￥129.9</i>
                        <div>看相似</div>
                    </span>
                </li>
                <li>
                    <span>
                        <img data-lazy-src="upload/tj5.webp" alt="">
                    </span>
                    <span class="desc_goods">PRUAD男士真皮双肩包男 大容量多功能商务电脑背包旅行包休闲书包韩版潮 黑色 </span>
                    <span>
                        <i>￥129.9</i>
                        <div>看相似</div>
                    </span>
                </li>

                <li>
                    <span>
                        <img data-lazy-src="upload/tj7.webp" alt="">
                    </span>
                    <span class="desc_goods">PRUAD男士真皮双肩包男 大容量多功能商务电脑背包旅行包休闲书包韩版潮 黑色 </span>
                    <span>
                        <i>￥129.9</i>
                        <div>看相似</div>
                    </span>
                </li>
                <li>
                    <span>
                        <img data-lazy-src="upload/tj8.webp" alt="">
                    </span>
                    <span class="desc_goods">PRUAD男士真皮双肩包男 大容量多功能商务电脑背包旅行包休闲书包韩版潮 黑色 </span>
                    <span>
                        <i>￥129.9</i>
                        <div>看相似</div>
                    </span>
                </li>
            </ul>
        </div>
        <!-- 10、为你推荐区域-end -->

        <!-- 11、底部用户区域-start -->
        <div class="user_edit">
            <a href="javascript:;">
                <img src="images/us11.png" alt="">
            </a>
            <a href="./asserts/sort/goodsSort.html">
                <img src="images/us2.png" alt="">
            </a>
            <a href="">
                <img src="images/us3.png" alt="">
            </a>
            <a href="">
                <img src="images/us4.png" alt="">
            </a>
            <a href="">
                <img src="images/us5.png" alt="">
            </a>
        </div>
        <!-- 11、底部用户区域-end -->

    </div>
    <!-- 图片懒加载放在最底下，不然无效 -->
    <script src="js/EasyLazyload.min.js"></script>
    <script>
        lazyLoadInit({
            coverColor: "white",
            showTime: 1100,
            onLoadBackEnd: function (i, e) {
                console.log("onLoadBackEnd:" + i);
            },
            onLoadBackStart: function (i, e) {
                console.log("onLoadBackStart:" + i);
            }
        });
    </script>
</body>

</html>